import React, { useEffect, useState } from 'react'

export default function Test() {
  const [count, setCount] = useState(10)
  // 把 #1 处的 timer 移到这儿能不能正常工作（还能不能在组件销毁的时候清除定时器）
  let timer = null
  // !答案，可以正常工作，因为形成了 【1】 次闭包，保证了清理的 timer 就是第一次定时器的引用
  useEffect(() => {
    // let timer = null // #1
    // 开启定时器的操作我只想走一次就够啦，所以第二个参数务必是一个空数组
    timer = setInterval(() => {
      console.log('~~~~')
      setCount((count) => count - 1)
    }, 1000)
    return () => {
      // 清理函数
      clearInterval(timer)
    }
  }, [])
  return <div>Test: {count}</div>
}
